<template>
  <el-dialog title="选择学生" :visible.sync="dialogVisible" :close-on-click-modal="false"
             :close-on-press-escape="false" @close="$emit('update:visible',false)" width="60%">
    <div style="max-height: 500px;overflow-y: auto;">
      <div class="hearder-search">
        <el-col :span="24" class="breadcrumb-container input-val-box">
          <div class="input-top">
            <el-input v-model="editForm.name" placeholder="填写学生姓名" size="small"></el-input>
          </div>
          <el-button type="primary" size="small" @click="searchStudentName"><i class="el-icon-search"></i>搜索</el-button>
          <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>刷新</el-button>
        </el-col>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
                  ref="multipleTable"
                  :data="arryList"
                  :stripe="tableStyle.tableStripe"
                  :border="tableStyle.tableBorder"
                  tooltip-effect="dark"
                  header-cell-class-name="table-text-c"
                  style="width: 100%">
            <el-table-column
                    label="姓名"
                    width="120"
                    align="center">
              <template slot-scope="scope">
                <el-radio v-model="radio" :label="scope.row.id">{{scope.row.name}}</el-radio>
              </template>
            </el-table-column>
            <el-table-column
                    prop="create_time"
                    label="头像"
                    width="80"
                    align="center">
              <template slot-scope="scope">
                <div class="imgbox">
                  <img :src="$BASE_URL+scope.row.pic" alt="" class="imgUserPic" v-if="scope.row.pic">
                  <img src="@/assets/imageAdmin/defultimg.jpg" alt="" class="imgUserPic" v-else>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                    prop="create_time"
                    label="所属班级"
                    align="center">
              <template slot-scope="scope">
                {{scope.row.classes.class_name}}
              </template>
            </el-table-column>
            <el-table-column
                    prop="sex"
                    label="性别"
                    width="50"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="enrol_time"
                    label="在校状态"
                    align="center">
              <template slot-scope="scope">
                <!--正常/离校/转校/毕业-->
                <span :class="scope.row.status=='正常'?'c-success':'c-danger'">{{scope.row.status}}</span>
                <el-tooltip class="item" effect="light" placement="bottom-start">
                  <div slot="content" class="infocontent">
                    <p>正常：该生还在学校内就读</p>
                    <p>离校：该生已办离校手续</p>
                    <p>转校：该生已办理转校手续</p>
                    <p>毕业：该生在校已完成学业</p>
                  </div>
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
                background
                layout="prev, pager, next"
                :total="page.total"
                :page-size="page.pagesize"
                @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click.native="resetForm" size="small">取消</el-button>
      <el-button type="primary" @click.native="editSubmit" size="small">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import {pagination, tableoption} from '@/utils/util.js'
  import api from '@/utils/api.js'

  export default {
    name: 'Dialog',
    props: ['visible'],
    watch: {
      visible () {
        this.dialogVisible = this.visible
        if (this.visible) {
          this.InitFn()
        }
      }
    },
    data () {
      return {
        radio: '',
        dialogVisible: false,
        arryList: [], // 页面数据列表
        // 设置table样式
        tableStyle: tableoption,
        // 设置table页面分页所需
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        },
        editForm: {
          p: '',
          name: '' // 	整型 	必填 	1 	- 	名称
        }
      }
    },
    created () {
    },
    methods: {
      InitFn () {
        this.editForm.p = this.page.pageindex
        this.$fetch(api.admin_student_index, this.editForm).then((response) => {
          if (response.code === 0) {
            this.arryList = response.list.data
            this.page.total = response.list.total
            // if (response.list.data.length) {
            //   this.radio = response.list.data[0].id
            // }
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      resetForm () {
        this.dialogVisible = false
      },
      editSubmit () {
        if (this.radio) {
          for (let i in this.arryList) {
            if (this.radio == this.arryList[i].id) {
              this.$emit('initFile', this.arryList[i])
              this.dialogVisible = false
              return
            }
          }
        } else {
          this.$message.error('请选择对应的学生')
        }
      },
      handleSizeChange (val) {
        this.page.pageindex = val
        this.InitFn()
      },
      searchStudentName () {
        this.page.pageindex = 1
        this.InitFn()
      },
      // 刷新页面
      refreshFn () {
        this.page.pageindex = 1
        this.editForm.name = ''
        this.InitFn()
      }
    }
  }
</script>

